<template>
  <div class="story-detail-container">
    <div class="story-detail-header">
      <h1>{{ story.title }}</h1>
      <div class="story-meta">
        <span class="story-category">{{ getCategoryName(story.category) }}</span>
        <span class="story-author">{{ story.author }}</span>
        <span class="story-time">{{ formatDate(story.publishTime) }}</span>
        <span class="story-likes">{{ story.likes }} 喜欢</span>
      </div>
    </div>
    
    <div class="story-content">
      <p>{{ story.content }}</p>
    </div>
    
    <div class="story-actions">
      <button @click="likeStory" class="like-btn">
        <span v-if="!liked">👍 点赞</span>
        <span v-else>❤️ 已点赞</span>
      </button>
      <button @click="goBack" class="back-btn">返回</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoryDetailView',
  data() {
    return {
      story: {},
      liked: false
    }
  },
  created() {
    // 获取故事ID
    const storyId = parseInt(this.$route.params.id)
    
    // 在实际项目中，这里应该从API或Vuex store获取数据
    // 这里我们使用模拟数据
    this.loadStory(storyId)
  },
  methods: {
    loadStory(id) {
      // 模拟数据 - 在实际应用中应该从API获取
      const mockStories = [
        {
          id: 1,
          title: '我和他的十年爱情长跑',
          category: 'love',
          content: '从高中到大学，从异地到同地，我们经历了无数的风风雨雨。还记得第一次见面时的紧张，第一次牵手时的心跳加速，第一次争吵后的冷战，以及每一次和好后的甜蜜。十年间，我们一起哭过笑过，一起面对生活的挑战。\n\n在这段旅程中，我们也曾想过放弃。工作的压力、家庭的反对、距离的考验都让我们疲惫不堪。但是，每当看到对方眼中的坚定和温柔，我们就知道这份感情值得坚持。\n\n如今，我们已经步入婚姻殿堂，回望过去，那些艰难的日子反而成了最珍贵的回忆。因为正是这些经历让我们的感情更加深厚，让我们更加珍惜彼此。',
          author: '爱情长跑者',
          publishTime: '2024-01-20',
          likes: 156
        },
        {
          id: 2,
          title: '分手后的自我救赎',
          category: 'breakup',
          content: '那段黑暗的日子里，我学会了如何与自己和解。分手的痛苦像潮水一样一波波袭来，我曾经以为我会永远沉溺在悲伤中无法自拔。\n\n最初的几个月，我拒绝一切社交活动，把自己关在房间里，反复听着那些伤感的歌曲，任由眼泪肆意流淌。朋友们的关心在我看来都是多余的打扰，我觉得全世界都不理解我的痛苦。\n\n直到有一天，我无意中看到了一句话："当你失去一个人的时候，你失去的其实是那个曾经的自己。"这句话如醍醐灌顶，让我开始反思这段感情以及我自己。\n\n我开始重新审视自己的生活，培养新的兴趣爱好，学习新的技能。我报名参加了瑜伽课程，开始每天跑步，还加入了读书会。渐渐地，我发现生活中还有很多美好的事物等待我去探索。\n\n一年后的今天，我已经不再是那个脆弱的女孩。我变得更加独立、自信，也更加懂得爱自己。虽然偶尔还会想起过去的美好时光，但我已经能够平静地面对它们了。',
          author: '匿名用户',
          publishTime: '2024-01-18',
          likes: 203
        },
        {
          id: 3,
          title: '友情里的那些温暖瞬间',
          category: 'friendship',
          content: '在我最困难的时候，是朋友们给了我继续前行的勇气。记得那年失业的冬天，我几乎要被生活的重担压垮了。房租、生活费、家人的期望，一切都让我喘不过气来。\n\n是我的朋友们陪我度过了那段最黑暗的时光。小李每天下班后都会来找我聊天，带我去吃好吃的，试图转移我的注意力；小王帮我修改简历，四处打听工作机会；小张甚至把她家的客房借给我住，不收一分钱。\n\n有一次，我因为面试失败而沮丧不已，一个人坐在公园里发呆。朋友们知道后，竟然不远千里赶到公园陪我，我们就这样坐了一整夜，聊着天南海北的话题，直到天亮。\n\n那一刻我才明白，真正的友情不是锦上添花，而是雪中送炭。它不需要华丽的言辞，只需要默默的陪伴和支持。这些年来，无论我遇到什么困难，朋友们总是在我身边，给我力量和温暖。\n\n我很幸运能够拥有这样的朋友，也很感激他们给我的所有帮助。我想对所有的朋友说一声谢谢，谢谢你们让我的人生如此精彩。',
          author: '暖心朋友',
          publishTime: '2024-01-15',
          likes: 124
        },
        {
          id: 4,
          title: '爱情里的小确幸',
          category: 'love',
          excerpt: '每天早上的一杯热咖啡，晚上的一个拥抱，这些小确幸构成了我们的爱情...',
          content: '每天早上的一杯热咖啡，晚上的一个拥抱，这些小确幸构成了我们的爱情。很多人问我，什么是爱情？我想，爱情不仅仅是轰轰烈烈的誓言，更是平凡日子里的点点滴滴。\n\n每天早晨，他总是比我早起十分钟，为我准备一杯温度刚刚好的咖啡。这个习惯已经持续了三年，从未间断。有时候我生病了，他会特意煮一些蜂蜜柠檬水；有时候我加班到很晚，他会一直等到我回家。\n\n晚上回到家，不管多累，我们都会给对方一个温暖的拥抱。这个简单的动作，总能瞬间消除一天的疲惫。周末的时候，我们会窝在沙发上看电影，或者一起去菜市场买菜，回家做一顿简单的晚餐。\n\n这些看似平常的小事，却是我最大的幸福。我渐渐明白，真正的爱情不需要太多的浪漫和惊喜，只需要两个人在一起时的那种安心和舒适。就像现在，即使什么都不说，只是静静地坐在一起，我也觉得很满足。\n\n感谢命运让我遇见了他，让我体验到了这种简单而美好的爱情。',
          author: '幸福小女人',
          publishTime: '2024-01-25',
          likes: 87
        },
        {
          id: 5,
          title: '爸爸的沉默守护',
          category: 'family',
          content: '从小到大，爸爸很少说话，但他的爱却藏在每一个细节里。小时候，我以为爸爸不爱我，因为他从来不会像妈妈那样亲吻我的额头，也不会对我说"我爱你"这样的话。\n\n上学的时候，别的同学都有爸爸接送，只有我是一个人走回家。那时候我很羡慕别人，甚至有些怨恨爸爸。直到有一天，我在学校门口看到了一个熟悉的身影——是爸爸！原来他一直在暗中保护着我，只是不想让我知道。\n\n长大后，我才慢慢理解了爸爸的沉默。他是一个不善言辞的人，但他用自己的方式表达着对家人的爱。每次家里有什么重活，他总是第一个冲上去；每次我遇到困难，他虽然不说什么，但总会默默地支持我。\n\n去年我生病住院，妈妈因为工作脱不开身，是爸爸在医院陪了我整整一个星期。他每天变着花样给我买好吃的，还偷偷去咨询医生我的病情。看着他日渐消瘦的身影，我的眼泪忍不住流了下来。\n\n现在的我终于明白，父爱如山，深沉而伟大。虽然爸爸不善于表达，但他的爱却比任何言语都要真切。我想对他说一声："爸爸，我爱你！"',
          author: '懂事的孩子',
          publishTime: '2024-01-24',
          likes: 112
        },
        {
          id: 6,
          title: '错过的爱情',
          category: 'love',
          content: '有些人，一旦错过就不在。那是大学时代的一个午后，阳光透过梧桐叶洒在地上，斑驳的光影就像我当时的心情。她就站在图书馆门口，手里拿着一本《飘》，微笑着向我走来。\n\n我们相识于一个偶然的机会，相知于无数次的深夜长谈。她喜欢文学，我喜欢音乐；她性格安静，我性格活泼。我们互补的性格让我们成为了最好的朋友，也让我心中萌生了不一样的情愫。\n\n可是，我始终没有勇气向她表白。我以为时间还很长，以为还有无数个明天可以用来表达我的心意。直到有一天，她告诉我她要出国留学了。\n\n那一刻，我的心仿佛被什么东西狠狠撞击了一下。我想挽留，想告诉她我的真实想法，可是话到嘴边却怎么也说出口。我只是淡淡地说了一句："一路顺风。"\n\n她走了，带走了我心中那份未曾说出的爱意。多年以后，我听说她在国外结婚了，有了自己的家庭。而我，也在这漫长的岁月中学会了接受和放下。\n\n有时候我会想，如果当初勇敢一点，结果会不会不一样？但人生没有如果，只有结果和后果。错过的人，注定只能成为回忆中最美的风景。',
          author: '匿名用户',
          publishTime: '2024-01-23',
          likes: 98
        },
        {
          id: 7,
          title: '友情里的嫉妒心',
          category: 'friendship',
          content: '我发现自己对最好的朋友产生了嫉妒心，这让我很困扰。事情的起因很简单，她找到了一份理想的工作，而我还在为求职奔波。看着她在社交媒体上分享新工作的喜悦，我的心情五味杂陈。\n\n起初，我试图说服自己为她感到高兴。毕竟，她那么优秀，得到好的机会是理所当然的。可是内心深处，那种酸涩的感觉却越来越强烈。我开始有意无意地疏远她，不再主动联系，也不再关注她的动态。\n\n这种状态持续了几个月，直到有一天她主动找我谈话。她说她注意到了我的变化，问我是不是出了什么事。那一刻，我再也控制不住自己的情绪，把心里的嫉妒和自卑全部倾诉了出来。\n\n听完我的话，她没有生气，也没有安慰，而是静静地听我说完。然后她告诉我："真正的朋友，应该为彼此的成功感到高兴。如果你因为我过得好而难过，那说明我们都需要重新审视这段友谊了。"\n\n她的话让我醍醐灌顶。我意识到，嫉妒其实源于内心的不安全感和对自己的不满意。我应该努力提升自己，而不是沉浸在负面情绪中。\n\n从那以后，我把这种嫉妒转化为动力，更加努力地寻找工作。最终，我也找到了一份不错的工作。现在，我们可以毫无芥蒂地分享彼此的喜悦，这份友谊也因此变得更加珍贵。',
          author: '真诚的朋友',
          publishTime: '2024-01-22',
          likes: 76
        },
        {
          id: 8,
          title: '爱情里的信任危机',
          category: 'love',
          content: '一次偶然的发现，让我对我们的关系产生了怀疑。那天我提前下班回家，想给她一个惊喜，却发现她不在家。手机里有一条陌生号码的未接来电，而她的手机却放在客厅的茶几上。\n\n一种不祥的预感涌上心头。我开始回想最近她的种种异常：频繁的加班、神秘的电话、越来越晚的回家时间......这些原本被我忽略的细节，此刻都成了怀疑的证据。\n\n接下来的几天，我变得敏感而多疑。我会偷偷查看她的手机，跟踪她的行踪，质问她的每一个解释。她察觉到了我的变化，问我发生了什么事，但我却无法坦诚地告诉她我的怀疑。\n\n直到有一天，我在她的包里发现了一个医院的检查报告。看到上面的内容，我整个人都愣住了——她怀孕了，但不是我的孩子。\n\n那一刻，我的心彻底碎了。原来一直以来的信任都是错觉，原来她一直在欺骗我。愤怒、伤心、绝望，各种情绪交织在一起，我不知道该如何面对这一切。\n\n经过几天的冷静思考，我决定和她好好谈一谈。当我把所有的疑问摆到桌面上时，她哭了。原来那个孩子是她前男友的，因为一些复杂的家庭原因，她不得不暂时照顾那个孩子，但从未想过要和那个人复合。\n\n虽然她的解释让我稍微释怀了一些，但这次信任危机已经在我们之间留下了深深的裂痕。也许，我们需要更多的时间来修复这份感情。',
          author: '困惑的恋人',
          publishTime: '2024-01-21',
          likes: 105
        }
      ]
      
      this.story = mockStories.find(story => story.id === id) || mockStories[0]
    },
    getCategoryName(category) {
      const categories = {
        love: '爱情故事',
        friendship: '友情故事',
        family: '亲情故事',
        breakup: '分手经历',
        growth: '成长感悟',
        other: '其他'
      }
      return categories[category] || '未分类'
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      const now = new Date()
      const diff = now - date
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
      
      if (days === 0) {
        return '今天'
      } else if (days === 1) {
        return '昨天'
      } else if (days < 7) {
        return `${days} 天前`
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    },
    likeStory() {
      if (!this.liked) {
        this.story.likes++
        this.liked = true
      } else {
        this.story.likes--
        this.liked = false
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.story-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.story-detail-header h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 1rem;
  text-align: center;
}

.story-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 0.9rem;
  color: #666;
}

.story-category {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.story-content {
  line-height: 1.8;
  color: #444;
  margin-bottom: 2rem;
  white-space: pre-line;
}

.story-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.like-btn, .back-btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.like-btn {
  background-color: #ff9a9e;
  color: #fff;
}

.like-btn:hover {
  background-color: #f86d75;
  transform: translateY(-2px);
}

.back-btn {
  background-color: #f0f0f0;
  color: #333;
}

.back-btn:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .story-detail-container {
    padding: 1rem;
  }
  
  .story-detail-header h1 {
    font-size: 1.5rem;
  }
  
  .story-meta {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
</style>